<template>
  <view class="recharge_record">
    <intake-nav-bar  title="流水记录" dark    />
    <view class="_record">
      <scroll-view scroll-y="true" class="record-list" style="height:100vh ;" @scrolltolower="loadMore">
        <view v-for="(item, index) in list" :key="index" class="record-item">
          <view class="record-icon" :class="item.type === 'recharge' ? 'income' : 'expense'">
            <uni-icons type="wallet" size="16" color="#FFFFFF"/>
          </view>
          <view class="record-content">
            <view class="record-main">
              <view class="record-info">
                <text class="card-number">{{item.card_no}}</text>
                <text class="record-type">{{item.remark}}</text>
              </view>
              <text class="amount" :class="item.type === 'recharge' ? 'income-text' : 'expense-text'">
                {{item.type === 'recharge' ? '+' : '-'}}{{item.amount}}
              </text>
            </view>
            <view class="record-detail">
              <text class="time">{{item.created_time}}</text>
              <text v-if="item.description" class="description">{{item.description}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import {  getRechargeLists } from '@/api/user/recharge';
export default {
  data() {
    return {
      list: [], // 列表数据
      page: 1, // 当前页码
      pageSize: 10, // 每页数据量
      loading: false, // 是否正在加载
      noMore: false, // 是否没有更多数据
      CardList:[],
      recordsList:[
        {
          cardNumber: '卡号2412010424214',
          type: '纯净水',
          amount: -1.2,
          time: '2025.02.06 10:20'
        },
        {
          cardNumber: '卡号2412010424214',
          type: '矿化水',
          amount: -1.8,
          time: '2025.02.03 15:42'
        },
        {
          cardNumber: '卡号2412010424214',
          type: '富氧水',
          amount: -5,
          time: '2025.02.01 18:36'
        },
        {
          cardNumber: '卡号2412010424214',
          type: '充值398套餐',
          amount: 598,
          time: '2025.02.01 18:36',
          description: '赠：200元水费+洗蛋+日用器250g+洗毛七件+富氧袋'
        },{
          cardNumber: '卡号2412010424214',
          type: '纯净水',
          amount: -1.2,
          time: '2025.02.06 10:20'
        },
        {
          cardNumber: '卡号2412010424214',
          type: '矿化水',
          amount: -1.8,
          time: '2025.02.03 15:42'
        },
        {
          cardNumber: '卡号2412010424214',
          type: '富氧水',
          amount: -5,
          time: '2025.02.01 18:36'
        },
        {
          cardNumber: '卡号2412010424214',
          type: '充值398套餐',
          amount: 598,
          time: '2025.02.01 18:36',
          description: '赠：200元水费+洗蛋+日用器250g+洗毛七件+富氧袋'
        },{
          cardNumber: '卡号2412010424214',
          type: '纯净水',
          amount: -1.2,
          time: '2025.02.06 10:20'
        },
        {
          cardNumber: '卡号2412010424214',
          type: '矿化水',
          amount: -1.8,
          time: '2025.02.03 15:42'
        },
        {
          cardNumber: '卡号2412010424214',
          type: '富氧水',
          amount: -5,
          time: '2025.02.01 18:36'
        },
        {
          cardNumber: '卡号2412010424214',
          type: '充值398套餐',
          amount: 598,
          time: '2025.02.01 18:36',
          description: '赠：200元水费+洗蛋+日用器250g+洗毛七件+富氧袋'
        },
        ],
    };
  },
  onLoad() {
    this.queryList()
  },
  methods: {
    async queryList() {
      if (this.loading || this.noMore) return;
      this.loading = true;
      const newData = await getRechargeLists(
        {
          page: this.page,
          pageSize: this.pageSize,
        })
      if (newData.data.data.length > 0) {
        this.list = this.list.concat(newData.data.data);
        this.page++;
      } else {
        this.noMore = true;
      }

      this.loading = false;
    },
     // 加载更多
     loadMore() {
      this.queryList();
    },
  }
}
</script>

<style lang="scss">
.recharge_record{
  background: url($baseUrl + '/images/bg/user_bg@2x.png') no-repeat center / 100% 100%;
  width: 100%;
  height: 100vh; /* 使用视口高度，确保元素高度充满整个屏幕 */
  //display: flex;
  justify-content: center;
  background-size: cover; /* 使背景图片覆盖整个元素 */
  padding: 0 30rpx;
  ._record {
    padding: 20rpx;
    .record-list {
      flex: 1;
      overflow: auto;
      .record-item{
        display: flex;
        padding: 30rpx;
        background-color: #FFFFFF;
        margin-top: 20rpx;
        .record-icon {
          width: 60rpx;
          height: 60rpx;
          border-radius: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          flex-shrink: 0;
        }
        .income {
          background-color: #FF4B4B;
        }
        .expense {
          background-color: #4080FF;
        }
        .record-content{
          flex: 1;
          .record-main {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .record-info {
              flex: 1;
              margin-right: 20rpx;
              .card-number {
                font-size: 14px;
                color: #333333;
                display: block;
                margin-bottom: 8rpx;
              }
              .record-type {
                font-size: 14px;
                color: #666666;
              }
            }
            .amount {
              font-size: 16px;
              font-weight: 500;
            }
            .income-text {
              color: #FF4B33;
            }

            .expense-text {
              color: #3662EC;
            }
          }
          .record-detail {
            margin-top: 16rpx;
            .time {
              font-size: 12px;
              color: #999999;
              display: block;
            }

            .description {
              font-size: 12px;
              color: #666666;
              margin-top: 8rpx;
              display: block;
            }
          }

        }
      }
    }

  }

}
</style>
